<html>
<head>
  <script src="../OLLoader.js"></script>
  <script type="text/javascript">
    function test_constructor (t) {
        t.plan(2);
        
        // set up
        var control;

        // tests
        control = new OpenLayers.Control.PanPanel({slideFactor: 200});
        t.ok(control.controls[0].slideFactor == 200 &&
             control.controls[1].slideFactor == 200 &&
             control.controls[2].slideFactor == 200 &&
             control.controls[3].slideFactor == 200,
             "ctor sets slideFactor in all Pan controls");
        
        control.destroy();

        control = new OpenLayers.Control.PanPanel({slideRatio: .5});
        t.ok(control.controls[0].slideRatio == .5 &&
             control.controls[1].slideRatio == .5 &&
             control.controls[2].slideRatio == .5 &&
             control.controls[3].slideRatio == .5,
             "ctor sets slideRatio in all Pan controls");
        
        control.destroy();
    }
    
    function test_slide(t) {
        t.plan(2);
        var map = new OpenLayers.Map("map", {
            panMethod: null,
            controls: [
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.PanPanel({slideRatio: .5})
            ],
            layers: [new OpenLayers.Layer(null, {isBaseLayer: true})],
            center: new OpenLayers.LonLat(0, 0),
            zoom: 1
        });
        
        map.controls[0].controls[0].trigger();
        map.controls[0].controls[2].trigger();
        map.pan(-50, 50);
        t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideFactor");
        
        map.controls[1].controls[0].trigger();
        map.controls[1].controls[2].trigger();
        map.pan(-128, 64);
        t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideRatio");        

        map.destroy();
    }
  </script>
</head>
<body>
    <div id="map" style="width: 256px; height: 128px;"></div>
</body>
</html>
